{% import 'macro/svg.html' as SVG %}
{% import 'macro/oops.html' as OOPS %}
<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          我的媒体库
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="javascript:show_mediasync_modal()" class="btn btn-primary d-none d-sm-inline-block">
            {{ SVG.refresh() }}
            媒体库同步
          </a>
          <a href="javascript:show_mediasync_modal()" class="btn btn-primary d-sm-none btn-icon">
            {{ SVG.refresh() }}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% if ServerSucess %}
  <div class="page-body">
    <div class="container-xl">
      <div class="row row-deck row-cards">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">电影</div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-0 me-2">{{ MediaCount.MovieCount }}</div>
              </div>
            </div>
            <div id="chart-movie-bg" class="chart-sm"></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">电视剧/动漫</div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-3 me-2">{{ MediaCount.SeriesCount }}</div>
                <div class="me-auto">
                <span class="text-green d-inline-flex align-items-center lh-1">
                  {{ MediaCount.EpisodeCount }}
                </span>
                </div>
              </div>
            </div>
            <div id="chart-tv-bg" class="chart-sm"></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card">
            <div class="card-stamp">
              <div class="card-stamp-icon" style="background-color: transparent">
                <img src="../static/img/music.png">
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">音乐</div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-3 me-2">{{ MediaCount.SongCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="card">
            <div class="card-stamp">
              <div class="card-stamp-icon" style="background-color: transparent">
                <img src="../static/img/users.png">
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="subheader">活跃用户</div>
              </div>
              <div class="d-flex align-items-baseline">
                <div class="h1 mb-3 me-2">{{ UserCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="row row-cards">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <p class="mb-3">存储空间共 <strong>{{ TotalSpace }}</strong></p>
                  <div class="progress progress-separated mb-3">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ UsedPercent }}%"></div>
                  </div>
                  <div class="row">
                    <div class="col-auto d-flex align-items-center pe-2">
                      <span class="legend me-2 bg-primary"></span>
                      <span>已使用</span>
                      <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ UsedSapce }}</span>
                    </div>
                    <div class="col-auto d-flex align-items-center ps-2">
                      <span class="legend me-2"></span>
                      <span>空闲</span>
                      <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ FreeSpace }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="card" style="height: 27rem">
                <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                  <div class="divide-y">
                    {% for Activity in Activitys %}
                      <div>
                        <div class="row">
                          <div class="col-auto">
                        <span class="avatar">
                          {% if Activity.type == "LG" %}
                            {{ SVG.user() }}
                          {% else %}
                            {{ SVG.player_play() }}
                          {% endif %}
                        </span>
                          </div>
                          <div class="col">
                            <div class="text-truncate">
                              {{ Activity.event }}
                            </div>
                            <div class="text-muted">{{ Activity.date }}</div>
                          </div>
                          <div class="col-auto align-self-center">
                            <div class="bg-primary"></div>
                          </div>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% else %}
{{ OOPS.systemerror('媒体服务器连接失败！', '当前无法连接媒体服务器获取数据，请确认Emby/Jellyfin/Plex配置是否正确。') }}
{% endif %}
<div class="modal modal-blur fade" id="index-mediasync-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="card border-0">
        <div class="card-body text-center">
          <div class="mb-3">
            <span class="avatar avatar-xl avatar-rounded"
                  style="background-image: url(../static/img/{{ MediaServerType }}.png)"></span>
          </div>
          <div class="card-title mb-1">{{ MediaServerType|title }}</div>
          <div class="text-muted" id="mediasync_status"></div>
        </div>
        <div class="card-progress">
          <div class="progress-bar bg-green" id="mediasync_process_bar" style="width: 0%" role="progressbar"
               aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <a href="javascript:start_media_sync(true)" id="mediasync_btn" class="card-btn">开始同步</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  if ('{{ ServerSucess }}' != 'False') {
    // 电影变化图
    if (typeof (chart_movie) != 'undefined')
      chart_movie.dispose();

    chart_movie = echarts.init($('#chart-movie-bg')[0], null, {
      height: 40.0
    });

    option_chart_movie = {
      animation: true,
      color: [
          tabler.getColor('primary')
      ],
      legend: {
        show: false,
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 2,
        containLabel: false
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        show: false,
        data: {{ MovieChartLabels| safe }}
      },
      yAxis: {show: false,},
      series: [{
        name: '电影',
        type: 'line',
        large: true,
        smooth: true,
        symbol: 'none',
        data: {{ MovieNums }}
      }]
    };
    chart_movie.setOption(option_chart_movie);

    // 电视剧变化图
    if (typeof (chart_tv) != 'undefined')
      chart_tv.dispose();

    chart_tv = echarts.init($('#chart-tv-bg')[0], null, {
      height: 40.0
    });

    option_chart_tv = {
      animation: true,
      color: [
          tabler.getColor('primary'),
        tabler.getColor('gray-600')
      ],
      legend: {
        show: false,
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 2,
        containLabel: false
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        show: false,
        data: {{ TvChartLabels| safe }}
      },
      yAxis: {show: false,},
      series: [{
        name: '电视剧',
        type: 'line',
        large: true,
        smooth: true,
        symbol: 'none',
        data: {{ TvNums }}
      }, {
        name: '动漫',
        type: 'line',
        large: true,
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 1.5,
          type: 'dashed'
        },
        data: {{ AnimeNums }}
      }]
    };
    chart_tv.setOption(option_chart_tv);

    // 响应大小调整
    window.onresize = function () {
      chart_tv.resize();
      chart_movie.resize();
    };
  }
</script>
<script type="text/javascript">
  //显示媒体库同步框
  function show_mediasync_modal() {
    //获取同步状态
    ajax_post("refresh_process", {type: "mediasync"}, function (ret) {
      if (ret.code === 0 && ret.value < 100) {
        //同步中
        $("#index-mediasync-modal").modal('show');
        start_media_sync(false);
      } else {
        //没有在同步，获取目前同步的数据情况
        ajax_post("mediasync_state", {}, function (ret) {
          if (ret.code === 0) {
            $("#mediasync_status").text(ret.text);
          }
          $("#mediasync_btn").text("开始同步")
              .attr("href", "javascript:start_media_sync(true)");
          $("#index-mediasync-modal").modal('show');
        }, true, false);
      }
    }, true, false);
  }

  //关闭媒体库同步框
  function close_mediasync_modal() {
    $("#index-mediasync-modal").modal('hide');
    refresh_sync_process_flag = false;
  }

  //开始媒体库同步
  function start_media_sync(flag) {
    $("#mediasync_btn").text("关闭")
        .attr("href", "javascript:close_mediasync_modal()");
    if (flag) {
      ajax_post("start_mediasync", {}, function (ret) {
        refresh_sync_process_flag = true;
        refresh_sync_process();
      }, true, false);
    } else {
      refresh_sync_process_flag = true;
      refresh_sync_process();
    }
  }

  //刷新进度及文件
  var refresh_sync_process_flag = false;
  function refresh_sync_process() {
    if (!refresh_sync_process_flag) {
      return;
    }
    ajax_post("refresh_process", {type: "mediasync"}, function (ret) {
      if (ret.code === 0) {
        $("#mediasync_process_bar").attr("style", "width: " + ret.value + "%")
            .attr("aria-valuenow", ret.value);
        $("#mediasync_status").text(ret.text);
      }
      if (ret.value < 100) {
        setTimeout("refresh_sync_process()", 200);
      }
    }, true, false);
  }

</script>